<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div slot="header">
        <span>工单详情</span>
        <!--<el-button type="success" size="small" class="bg-green" style="float:right;" @click="toExportData">导出</el-button>-->
      </div>
      <el-row>
        <el-col :span="12">
          <el-form label-width="160px">
            <el-form-item label="提交时间：">{{ info['createTime'] }}</el-form-item>
            <el-form-item label="提交人姓名：">{{ info['userName'] }}</el-form-item>
            <el-form-item label="所属分类：">{{ info['catName'] }}</el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="160px">
            <el-form-item label="工单状态：">
              <el-tag v-if="info['status']==='1'" type="danger">待签收</el-tag>
              <el-tag v-else-if="info['status']==='2'" type="success">处理中</el-tag>
              <el-tag v-else type="warning">已结单</el-tag>
            </el-form-item>
            <el-form-item label="提交人手机：">{{ info['userMobile'] }}</el-form-item>
            <el-form-item label="类型/范围：">{{ info['typeName'] }}</el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-divider/>
      <el-form label-width="240px">
        <el-form-item v-for="(item, index) in info.feedback" v-if="item.display" :key="index">
          <span slot="label">
            <el-tooltip :content="item.name" class="item" effect="dark" placement="top">
              <div class="form-label">{{ item.name }}</div>
            </el-tooltip>
          </span>
          <slot v-if="item['reply']">
            <ws-upload-multiple-img v-if="item.type==='UploadPicture'" :disable="true" :path="item['reply']"/>
            <div v-else-if="item.type==='UploadVoice'">
              <div v-for="(subItem, index) in item['reply']" :key="index">
                <label>{{ subItem['name'] }}</label>
                <el-button class="el-icon-video-play" type="primary" size="small" @click="playVoice(subItem['src'])">
                  播放
                </el-button>
                <el-link :href="subItem['src']" target="_blank">
                  <el-button type="primary" size="small">下载</el-button>
                </el-link>
              </div>
            </div>
            <div v-else-if="item.type==='UploadFile'">
              <div v-for="(subItem, index) in item['reply']" :key="index">
                <el-link :href="subItem.url" target="_blank">
                  {{ subItem.filename }}
                </el-link>
              </div>
            </div>
            <label v-else>{{ item['reply'] }}</label>
          </slot>
          <slot v-else>
            <label> {{ '--' }}</label>
          </slot>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card v-if="info['status']!=='1'" class="box-1" style="margin-top: 20px;">
      <div slot="header"><span>处理情况</span></div>
      <el-form v-for="item in info['replyData']" :key="item.id" label-width="140px">
        <el-form-item label="处理人：">{{ item['name'] + ' ( '+ item['createTime'] + ' ) ' }}</el-form-item>
        <el-form-item label="内容：">{{ item['feedback'] }}</el-form-item>
        <el-form-item v-if="item['picture'] && item['picture'].length>0" label="图片：">
          <ws-upload-multiple-img :disable="true" :path="item['picture']"/>
        </el-form-item>
        <el-form-item v-if="item['annex']&& item['annex'].length>0" label="附件：">
          <el-table :data="item['annex']" border highlight-current-row>
            <el-table-column prop="filename" label="文件名" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="describe" label="描述" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="updateTime" label="更新时间" width="160" header-align="center" align="center"/>
            <el-table-column prop="cost" label="收费" width="120" header-align="center" align="center"/>
            <el-table-column prop="cost" label="操作" width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <el-link :href="scope.row['url']" target="_blank">下载</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-divider/>
      </el-form>
    </el-card>

    <el-card v-if="info['status']!=='3'" class="box-1" style="margin-top: 20px;">
      <div slot="header" style="display: flex;flex-direction:row; align-items: center;justify-content: space-between;">
        <span>处理工单</span>
        <el-button v-if="info['status']!=='1'" type="danger" @click="finishOrder">确认结单</el-button>
      </div>
      <el-form ref="handleForm" :model="handleForm" :rules="handleFormRules" label-width="140px">
        <el-form-item label="处理说明：" prop="value">
          <el-input v-model="handleForm['value']" type="textarea" rows="5"/>
        </el-form-item>
        <el-form-item label="处理图片">
          <ws-upload-multiple-img v-model="handleForm['images']" :path="handleForm['imagesUrl']"/>
        </el-form-item>
        <el-form-item label="附件管理">
          <el-button type="primary" size="small" @click="showFileDialog('fileDialog')">上传附件</el-button>
          <el-table :data="handleForm['fileList']" border highlight-current-row>
            <el-table-column prop="filename" label="文件名" min-width="140" header-align="center" align="center"/>
            <el-table-column prop="describe" label="描述" min-width="160" header-align="center" align="center"/>
            <el-table-column prop="updateTime" label="更新时间" width="160" header-align="center" align="center"/>
            <el-table-column prop="cost" label="收费" width="120" header-align="center" align="center"/>
            <el-table-column prop="cost" label="操作" width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" class="el-icon-delete"
                           @click="handleForm['fileList'].splice(scope.$index, 1)"/>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div class="text-center">
        <el-button type="primary" style="width: 240px;" @click="submitReply('handleForm')">意见回复</el-button>
      </div>
    </el-card>

    <!--上传附件弹窗-->
    <el-dialog :visible.sync="fileDialogVisible" title="上传附件" width="580px" class="dialog" center>
      <el-form ref="fileDialogForm" :model="fileDialogForm" :rules="fileDialogFormRules" label-width="120px">
        <el-form-item label="名称" prop="filename">
          <el-input v-model="fileDialogForm.filename"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="fileDialogForm.describe"/>
        </el-form-item>
        <el-form-item label="费用" prop="cost">
          <el-input-number v-model="fileDialogForm.cost" :min="0"/>
        </el-form-item>
        <el-form-item label="文件" prop="url">
          <ws-upload-single-file v-model="fileDialogForm['url']" :path="fileDialogForm['url']" :api="fileUploadUrl"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fileDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="addFile('fileDialog')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {parseTime} from '../../../../utils'

  export default {
    data() {
      return {
        id: '',
        info: {},
        // 处理详情
        handleForm: {
          value: '',
          images: '',
          imagesUrl: [],
          fileList: []
        },
        handleFormRules: {
          'value': [{required: true, message: '请输入处理说明', trigger: 'blur'}]
        },
        // 附件上传地址
        fileUploadUrl: this.$store.getters.serverUrl + '/admin/newWork/uploadAnnex',
        // 附件弹窗
        fileDialogVisible: false,
        fileDialogForm: {
          filename: '',
          describe: '',
          cost: 0,
          url: ''
        },
        fileDialogFormRules: {
          'filename': [{required: true, message: '请输入附件名称', trigger: 'blur'}],
          'describe': [{required: true, message: '请输入附件描述', trigger: 'blur'}],
          'cost': [{required: true, message: '请输入附件费用', trigger: 'blur'}],
          'url': [{required: true, message: '请上传附件', trigger: 'blur'}]
        }
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id
      this.getData()
    },
    methods: {
      getData() {
        const url = 'newWork/list/getInfo'
        const data = {
          id: this.id
        }
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.info = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      // 播放音频
      playVoice(voiceUrl) {
        const audio = new Audio()
        audio.src = voiceUrl
        audio.play()
      },

      // 显示上传附件弹窗
      showFileDialog(formName, scope) {
        if (scope) {
          this[formName + 'Form'] = Object.assign(this[formName + 'Form'], scope.row)
        } else {
          this[formName + 'Form'] = {
            cost: 0
          }
        }
        this[formName + 'Visible'] = true
      },

      // 添加
      addFile(formName) {
        this.$refs[formName + 'Form'].validate((valid) => {
          if (valid) {
            this[formName + 'Form'].updateTime = parseTime(new Date().getTime())
            this.handleForm.fileList.push(this[formName + 'Form'])
            this[formName + 'Visible'] = false
          } else {
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },

      // 回复
      submitReply(formname) {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            const url = 'newWork/list/saveFeedBack'
            const data = {
              listId: this.id,
              feedback: this.handleForm.value || '',
              picture: this.handleForm.images || '',
              annex: JSON.stringify(this.handleForm.fileList || '')
            }
            console.log(data)
            this.$store.dispatch('GetConnect', {url, data}).then(res => {
              this.$message.success(res.msg)
              this.handleForm = {
                value: '',
                images: '',
                imagesUrl: [],
                fileList: []
              }
              this.getData()
              // this.$router.back();
            }).catch(e => {
              this.$message.error(e.msg + ',请刷新或联系管理员!')
            })
          } else {
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },

      // 结单
      finishOrder() {
        const url = 'newWork/list/finish'
        const data = {id: this.id}
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.$message.success(res.msg)
          this.$router.back()
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员!')
        })
      },

      // 导出数据
      toExportData() {
        window.open(this.$store.getters.serverUrl + '/admin/newWork/list/exportData?token=' + this.$store.getters.token + '&id=' + this.id + '&mallId=' + this.$store.getters.SaaSId)
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
  }

  .form-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 180px;
    color: #000;
  }
</style>
